<template>
  <div class="al_learn_box">
    <a-card>
      <div class="top">
        <span>
            <a-button aria-setsize="large" @click="clearData">
                清空
            </a-button>
            <a-button aria-setsize="large" @click="exec">
                执行{{ data.label }}函数
            </a-button>
        </span>
        <a-tree
          :blockNode="true"
          :checkable="true"
          :data="data"
          :default-expand-all="true"
          :draggable="true"
          size="large"
        >
          <template #extra="nodeData">
            <span class="custom-tree-node">
                <span>{{ nodeData.label }}</span>
                <span>
                    <a-button
                      type="text"
                      size="large"
                      @click="showOrDisAppearEditDailog(nodeData)">
                    Edit
                    </a-button>
                    <a-button
                      type="text"
                      size="large"
                      @click="() => append(nodeData)">
                    Append
                    </a-button>
                    <a-button
                      type="text"
                      size="large"
                      @click="() => remove(nodeData)">
                    Delete
                    </a-button>
                </span>
            </span>
          </template>
        </a-tree>
        <a-modal v-model:visible="showEditVisible" @ok="editFunName" @cancel="showOrDisAppearEditDailog">
          <template #title>
            修改函数名
          </template>
          <a-form :model="funNameform">
            <a-form-item label="函数名" label-width="70px">
              <a-input v-model="funNameform.name" autocomplete="off"></a-input>
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
      <div class="box">
        <a-row :gutter="12" class="main">
          <a-col :span="10">
            <a-card class="box-card fl">
                    <span class="title">
                        function stark
                    </span>
              <div>
                <ol class="ol">
                  <li class="item" v-for="v in execList" :key="v.key">
                    {{ v.title }} {{ v.flag ? "in" : "out" }}
                  </li>
                </ol>
              </div>
            </a-card>

          </a-col>
          <a-col :span="14">
            <a-card class="box-card fl" style="min-height: 400px">
              <div class="stark">
                <div class="funContain">
                  <ul>
                    <li class="item"
                        v-for="it in showFunList" :key="it">
                      {{ it }}
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <span>
                      {{ curShowIndex }} / {{ execList.length }}
                  </span>
                  <a-button size="large" type="primary" icon="a-icon-refresh-left" style="margin-right: 10px;margin-left: 10px" @click="reNew">
                    <template #icon><icon-refresh /></template>
                  </a-button>
                  <a-button size="large" type="warning" style="margin-right: 10px" plain @click="preStep">
                    上一步
                  </a-button>
                  <a-button size="large" type="primary" plain @click="nextStep">
                    下一步
                  </a-button>
                </div>
              </div>
            </a-card>

          </a-col>

        </a-row>

      </div>
    </a-card>

  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";


let key = 2;
const data = ref([{
  key: 1,
  label: 'main函数',
  children: []
}]);
const showEditVisible = ref(false);
const funNameform = ref({
  name: ''
});
const curSelFunKey = ref(0);
const execList = ref([]);
const showFunList = ref([]);
const curShowIndex = ref(0);

const append = (data) => {
  console.log(data);
  const newChild = {key: key, label: 'test ' + key++, children: []};
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
}

const remove = (nodedata) => {
  console.log('nodedata', nodedata);
  let parent = null;
  let tp = [...data.value];
  while (tp.length) {
    let flag = null;
    console.log('tp0', tp);
    tp[0].children = tp[0].children.filter(it => it.key != nodedata.key);
    for (const childrenItem of tp[0].children) {
      if (childrenItem.key == nodedata.key) {
        flag = true;
        parent = tp[0];
        break;
      }
      tp.push(childrenItem)
    }
    if (flag) {
      break;
    }
    tp.splice(0, 1);
  }
  console.log('parent', parent);
}

const showOrDisAppearEditDailog = (data) => {
  showEditVisible.value = !showEditVisible.value;
  if (!data) return
  curSelFunKey.value = data.key;
  funNameform.value.name = data.title;
  console.log(curSelFunKey);
}
const editFunName = () => {
  let key = curSelFunKey.value, name = funNameform.value.name, p = data.value;
  let arr = [...p];
  while (arr.length) {
    let t = arr.shift();
    console.log(t?.key + ' ');
    if (t?.key == key) {
      t.label = name;
      console.log(data.value);
      break;
    }
    if (t?.children)
      for (let it of t?.children) {
        arr.push(it);
      }
  }
  showOrDisAppearEditDailog(data.value)
}
const clearData = () => {
  data.value.splice(0, data.value.length);
  data.value.push({
    key: 1, label: 'main函数', children: []
  })
}
const dfsFunTree = (cur) => {
  console.log(cur);
  if (!cur) return;
  execList.value.push({title: cur.label, flag: 1});
  for (let it of cur.children) {
    dfsFunTree(it);
  }
  execList.value.push({title: cur.label, flag: 0});
}
const exec = () => {
  execList.value.splice(0, execList.value.length);
  // 拿到正确执行顺序
  dfsFunTree(data.value[0]);

}
const preStep = () => {
  if (!curShowIndex.value) return;
  let ind = --curShowIndex.value, list = execList.value;
  let curItem = list[ind];
  if (curItem?.flag) {
    showFunList.value.shift();
  } else {
    showFunList.value.unshift(curItem?.title);
  }
  console.log('showFunList', showFunList.value);
}
const nextStep = () => {
  if (curShowIndex.value == execList.value?.length) return;
  let ind = curShowIndex.value++, list = execList.value;
  let curItem = list[ind];
  if (curItem?.flag) {
    showFunList.value.unshift(curItem?.title);
  } else {
    showFunList.value.shift();
  }
  console.log('showFunList', showFunList.value);
}
const reNew = () => {
  curShowIndex.value = 0;
  showFunList.value.splice(0, showFunList.value.length);
}

watch(() => data, (nnew, old) => {
  // 执行逻辑
  console.log('old', old);
  console.log('nnew', nnew);
  exec();
  // 延时图重置
  curShowIndex.value = 0;
}, { immediate: true, deep: true });

</script>

<style scoped>
.al_learn_box {
  height: 100%;
}
.al_learn_box {
  width: 100%;
  height: 100%;
}
.al_learn_box .top {
  margin: 20px;
  //width: 50%;
}
.al_learn_box .top .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.al_learn_box .top .custom-tree-node .inp {
  width: 30px;
  display: inline-block;
}
.al_learn_box .box {
  font-size: 14px;
  margin: 0 auto;
  width: 100%;
}
.al_learn_box .box .title {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}
.al_learn_box .box ol {
  margin-left: 20px;
}
.al_learn_box .box ol .item {
  line-height: 20px;
  text-align: center;
}
.al_learn_box .box .stark {
  padding: 20px;
  border: 2px solid skyblue;
  position: relative;
}
.al_learn_box .box .stark .funContain {
  border: 2px;
  border-top: 0px;
  border-color: grey;
  min-height: 50px;
}
.al_learn_box .box .stark .funContain ul {
  list-style-type: none;
  margin: 0;
}
.al_learn_box .box .stark .funContain ul .item {
  background-color: palegoldenrod;
  width: 250px;
  height: 30px;
  border: 1px solid yellow;
  text-align: center;
}
.al_learn_box .box .stark .btn {
  right: 50px;
  top: 28px;
  position: absolute;
}
.box-card,
.main {
  width: 100%;
  height: 100%;
}

</style>